<template>
    <div>
        <div class="tpt-regist">
            <img :src="logo1" alt="" style="z-index: 10000; margin-top: -10px; width: 80px;">
            <h2 align="center" style="font-size: 30px">用户注册</h2>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="user" style="margin-top: 70px; width:400px; margin-left: 20px">
                    <el-input
                            type="text"
                            v-model="ruleForm.user"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="mobile" style="margin-top: 30px; width:400px; margin-left: 20px">
                    <el-input v-model="ruleForm.mobile" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass" style="margin-top: 30px; width:400px; margin-left: 20px">
                    <el-input type="password" v-model="ruleForm.pass" clearable></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass" style="margin-top: 30px; width:400px; margin-left: 20px">
                    <el-input type="password" v-model="ruleForm.checkPass" clearable></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 70px; margin-top: 50px">
                    <el-button type="primary" @click="submitForm(ruleForm)">注册</el-button>
                    <el-button @click="returnForm">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="block">
            <el-carousel height="950px">
                <el-carousel-item v-for="item in items" :key="item">
                    <el-avatar :size="0">
                        <img :src="item" alt="">
                    </el-avatar>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script>
import image1 from '../../assets/image/background_01.jpg'
import image2 from '../../assets/image/background_02.jpg'
import image3 from '../../assets/image/background_03.jpg'
import image4 from '../../assets/image/background_04.jpg'
import image5 from '../../assets/image/background_05.jpg'
import logo from '../../assets/image/logo.png'
import {showAllName, register} from '@api/user'
export default {
  name: 'Login',
  data () {
    var checkUser = (rule, value, callback) => {
      const regUser = /^[a-zA-Z0-9_-]{3,8}$/
      if (regUser.test(value)) {
        return callback()
      }
      console.log(this.nameAll.indexOf(value))
      // if (this.nameAll.indexOf(value) !== -1) {
      //   return callback(new Error('重复'))
      // }
      callback(new Error('用户名格式错误'))
    }
    var checkMobile = (rule, value, callback) => {
      const regUser = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
      if (regUser.test(value)) {
        return callback()
      }
      callback(new Error('手机号格式错误'))
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        user: [{validator: checkUser, trigger: 'blur'}],
        mobile: [{validator: checkMobile, trigger: 'blur'}],
        pass: [{validator: validatePass, trigger: 'blur'}],
        checkPass: [{validator: validatePass2, trigger: 'blur'}]
      },
      ruleForm: {
        user: '',
        mobile: '',
        pass: '',
        checkPass: ''
      },
      items: [image1, image2, image3, image4, image5],
      nameAll: '',
      logo1: logo
    }
  },
  methods: {
    NameAll (name) {

    },
    returnForm () {
      // 返回login界面
      this.$router.push('/login')
    },
    submitForm (item) {
      const regUser = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
      console.log(item)
      showAllName().then(res => {
        if (res.data.indexOf(item.user) !== -1) {
          alert('用户名重复')
          item.user = ''
        }
        if (!regUser.test(item.mobile)) {
          alert('手机格式错误')
          item.mobile = ''
        }
        // if ()
      })
      if (item.user === '' || item.mobile === '' || item.pass === '') {
        alert('您输入的信息有误请重新输入')
      } else {
        register({username: item.user, phoneNum: item.mobile, password: item.pass}).then(res => {
          console.log(res)
        })
        setTimeout(() => {
          this.returnForm()
        }, 2000)
        // alert('注册成功')
      }
      // this.$router.push('/login')
    }
  },
  created () {
  }
}
</script>
<style scoped>
    .tpt-regist {
        width: 500px;
        height: 550px;
        padding: 50px 30px;
        background-color: white;
        border-radius: 8px;
        margin-top: 140px;
        margin-left: 680px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 100;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 600px;
        margin: 0;
        width: 100%;
        height: 1100px;
    }
</style>
